<template>
  <div class="add-teacher">
    <div class="item">
      <div class="item-title">姓名</div>
      <div class="input">
        <el-input placeholder="老师姓名" v-model="newTeacher.F_name"></el-input>
      </div>
    </div>
    <div class="item">
      <div class="item-title">性别</div>
      <div class="input">
        <div class="radio-item btn" @click="newTeacher.F_gender = 1">
          <i
            class="radio-icon"
            :class="{ checked: newTeacher.F_gender === 1 }"
          ></i>
          <label>男</label>
        </div>
        <div class="radio-item btn" @click="newTeacher.F_gender = 2">
          <i
            class="radio-icon"
            :class="{ checked: newTeacher.F_gender === 2 }"
          ></i>
          <label>女</label>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item-title">登录账号</div>
      <div class="input">
        <el-input
          maxlength="11"
          placeholder="手机号码"
          v-model="newTeacher.F_phone"
        ></el-input>
      </div>
    </div>
    <div class="item">
      <div class="item-title">教学科目</div>
      <div class="input">
        <div
          class="subject-select-wrapper"
          @mouseleave="showSubjectList = false"
        >
          <span class="subject-name" @mouseenter="showSubjectList = true"
            >{{ newTeacher.F_subject_name }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <ul class="subject-list" v-if="showSubjectList">
            <li
              v-for="item in schoolSubjectList"
              :key="item.id"
              @click="selectSubject(item)"
            >
              {{ item.name }}
            </li>
            <li v-if="!schoolSubjectList.length">暂无科目</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="item-title">班主任</div>
      <div class="input">
        <div class="radio-item btn" @click="newTeacher.F_master = 1">
          <i
            class="radio-icon"
            :class="{ checked: newTeacher.F_master === 1 }"
          ></i>
          <label>是</label>
        </div>
        <div class="radio-item btn" @click="newTeacher.F_master = 0">
          <i
            class="radio-icon"
            :class="{ checked: newTeacher.F_master === 0 }"
          ></i>
          <label>否</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { subjectList } from '@/utils/maps';

export default {
  name: 'AddTeacher',
  data() {
    return {
      newTeacher: {
        F_name: '',
        F_gender: 1,
        F_phone: '',
        F_master: 0,
        F_subject: 0,
        F_subject_name: '',
      },
      schoolSubjectList: [],
      teachSubject: {},
      showSubjectList: false,
    };
  },
  computed: {
    ...mapGetters('school', ['schoolId']),
  },
  mounted() {
    this.getSubjectList();
  },

  methods: {
    async getSubjectList() {
      const {
        F_term: { F_subjects },
      } = await this.$api.getTerm({
        F_school_id: this.schoolId,
      });
      this.schoolSubjectList = subjectList.filter((e) =>
        F_subjects.includes(e.id)
      );
      if (this.schoolSubjectList.length > 0) {
        this.newTeacher.F_subject = this.schoolSubjectList[0].id;
        this.newTeacher.F_subject_name = this.schoolSubjectList[0].name;
      } else {
        this.$toast('该班级暂无开设的科目，请先去开设科目', 2000);
      }
    },
    selectSubject(item) {
      this.newTeacher.F_subject = item.id;
      this.newTeacher.F_subject_name = item.name;
      this.showSubjectList = false;
    },
  },
};
</script>

<style lang="less" scoped>
// 添加老师、学生
.add-teacher {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0;
  .item {
    display: flex;
    align-items: center;
    margin: 10px 0;
    .item-title {
      display: inline-block;
      width: 40%;
      text-align: end;
    }
    .input {
      box-sizing: border-box;
      display: inline-flex;
      width: 60%;
      padding: 0 20px;
      text-align: start;
      // vertical-align: middle;
      position: relative;
      :deep(.el-input) {
        width: 200px;
        .el-input__inner {
          height: 35px;
        }
      }
      .radio-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .radio-icon {
          width: 16px;
          height: 16px;
          margin-right: 6px;
          background: url('@/assets/image/common/单选.png') center no-repeat;
          background-size: 16px 16px;
        }
        .checked {
          background-image: url('@/assets/image/common/单选选中.png');
        }
      }

      .subject-select-wrapper {
        width: 100px;
        position: relative;
        font-size: 14px;
        .subject-name {
          width: 80px;
          height: 35px;
          padding: 0 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
        }
        .subject-list {
          z-index: 996;
          min-width: 100px;
          background-color: #fff;
          box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 5%);
          border-radius: 4px;
          border: solid 2px #f5f5f5;
          position: absolute;
          top: 35px;
          left: 0;
          height: 130px;
          overflow-x: auto;
          li {
            cursor: pointer;
            padding: 10px 20px;
            &:hover {
              background-color: #ebf5ff;
            }
          }
        }
      }
    }
  }
}
</style>
